<template>
  <div class="song-lyric">
    <h1 class="lyric-title">歌词</h1>
    <!-- 有歌词 -->
    <ul class="has-lyric" v-if="lyr.length" key="index">
      <li v-for="(item,index) in lyr" v-bind:key="index">
        {{item[1]}}
      </li>
    </ul>
    <!-- 没有歌词 -->
    <div v-else class="no-lyric" key="no-lyric">
      <span>暂无歌词</span>
    </div>
  </div>
</template>
<script>
  import {
    mixin
  } from '../mixins';
  import {
    mapGetters
  } from 'vuex';

  export default {
    name: 'lyric',
    mixins: [mixin],
    data() {
      return {
        lyr: [] //当前歌曲的歌词
      }
    },
    computed: {
      ...mapGetters([
        'curTime', //当前歌曲播放到的位置
        'id', //当前播放的歌曲id
        'lyric', //歌词
        'listIndex', //当前歌曲在歌单中的位置
        'listOfSongs', //当前歌单列表
      ])
    },
    created() {
      this.lyr = this.lyric;
    },
    watch: {
      id: function() {
        this.lyr = this.parseLyric(this.listOfSongs[this.listIndex].lyric)
      },
      curTime: function() {
        if (this.lyr.length > 0) {
          for (let i = 0; i < this.lyr.length; i++) {
            if (this.curTime >= this.lyr[i][0]) {
              for (let j = 0; j < this.lyr.length; j++) {
                document.querySelectorAll('.has-lyric li')[j].style.color = '#000';
                document.querySelectorAll('.has-lyric li')[j].style.fontSize = '15px';
              }
              if (i >= 0) {
                document.querySelectorAll('.has-lyric li')[i].style.color = '#95d2f6';
                document.querySelectorAll('.has-lyric li')[i].style.fontSize = '25px';
              }
            }
          }
        }
      }
    }
  }
</script>
<style scoped>
  .song-lyric {
   margin-top: -100px;
    width: 600px;
    background-color: white;
    border-radius: 12px;
    font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont,
      Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
      Helvetica Neue, Helvetica, Arial, sans-serif;

  }

  .lyric-title {
    text-align: center;
    height: 10px;
    margin-top: 100px;
    border-bottom: 2px solid black;
  }

  .has-lyric {
    font-size: 18px;
    padding: 30px 0;
    width: 100%;
    min-height: 170px;
    text-align: center;


  }

  li {
    width: 100%;
    height: 40px;
   line-height: 40px;
  }

  .no-lyric {
    margin: 200px 0;
    width: 100%;
    text-align: center;


  }

  span {
    font-size: 18px;
    text-align: center;
  }


  .lyric-fade-enter,
  .lyric-fade-leave-to {
    transform: translateX(30px);
    opacity: 0;
  }

  .lyric-fade-enter-active,
  .lyric-fade-leave-active {
    transition: all 0.3s ease;
  }
</style>
